<template>
  <n-flex align="center" class="mb-2">
    <n-cascader
      v-model:value="queryInfo.examId"
      placeholder="请选择科目"
      :expand-trigger="'click'"
      :options="examOptions"
      :check-strategy="'child'"
      :show-path="true"
      :filterable="true"
      @update:value="handleExamChange"
      class="!w-[200px] mr-2"
      size="small"
    />
    <n-cascader
      v-if="queryInfo.examId && hasChapter"
      v-model:value="queryInfo.chapterId"
      placeholder="请选择章节"
      :expand-trigger="'click'"
      :options="chapterOptions"
      :check-strategy="'child'"
      :show-path="true"
      :filterable="true"
      class="!w-[200px] mr-2"
      size="small"
      @update:value="handleChapterChange"
    />
    <n-select
      v-if="queryInfo.chapterId && hasPaper"
      v-model:value="queryInfo.paperId"
      @change="handlePaperChange"
      filterable
      placeholder="请选择试卷"
      class="!w-[200px]"
      :options="paperOptions"
      size="small"
    />
    <n-button type="primary" @click="handleSearch" v-if="hasBtn" size="small">
      查询
    </n-button>
  </n-flex>
</template>

<script setup lang="ts">
import useExamStore from '@/stores/modules/exam'
import useChapterStore from '@/stores/modules/chapter'
import { getPaperByPage } from '@/api/paper'
import { arrayToTree } from '@/utils'

const props = withDefaults(
  defineProps<{
    hasChapter?: boolean
    hasPaper?: boolean
    hasBtn?: boolean
  }>(),
  {
    hasChapter: true,
    hasPaper: true,
    hasBtn: true
  }
)

const emits = defineEmits<{
  (e: 'changeValue', value: typeof queryInfo): void
  (e: 'search', value: typeof queryInfo): void
}>()

const examStore = useExamStore()
const chapterStore = useChapterStore()
const examOptions = ref<any[]>([])
const chapterOptions = ref<any[]>([])
const paperOptions = ref<any[]>([])

const queryInfo = reactive({
  examId: undefined,
  chapterId: undefined,
  paperId: undefined
})

const handleSearch = () => {
  emits('search', queryInfo)
}

// 加载根科目数组
const initOptions = async () => {
  if (!examStore.fullExamList.length) {
    await examStore.getFullExamList()
  }
  examOptions.value = examStore.treeFullExamList
  console.log(examOptions.value, 'xxx')
}

const handleExamChange = async (value: string) => {
  if (value && props.hasChapter) {
    // 加载对应的章节数组
    if (!chapterStore.fullChapterList.length) {
      await chapterStore.getFullChapterList()
    }
    const chapterArr = chapterStore.fullChapterList.filter(
      (item: any) => item.examId === value
    )

    // 转换为树
    chapterOptions.value = arrayToTree(chapterArr, 'pid', '-1').map(
      (item: any) => {
        return {
          key: item.id,
          label: item.name,
          value: item.id
        }
      }
    )
  }
  emits('changeValue', queryInfo)
}

const handleChapterChange = (value: string) => {
  if (value && props.hasPaper) {
    loadPapersByChapterId(value).then((res: any) => {
      paperOptions.value = res.map((item: any) => {
        return {
          key: item.id,
          label: item.name,
          value: item.id
        }
      })
    })
  }
  emits('changeValue', queryInfo)
}

const handlePaperChange = (value: string) => {
  emits('changeValue', queryInfo)
}

const loadPapersByChapterId = (chapterId: string) => {
  return new Promise((resolve, reject) => {
    getPaperByPage({
      page: 1,
      pageSize: 9999,
      chapterId
    })
      .then((res) => {
        resolve(res.data.items)
      })
      .catch(() => {
        reject([])
      })
  })
}

onMounted(() => {
  initOptions()
})
</script>

<style lang="scss" scoped></style>
